<template>
  <div class="learning-plan-container">
    <h2 class="page-title">学习计划管理</h2>

    <!-- 科目输入框 -->
    <el-input
        v-model="subject"
        placeholder="请输入科目（例如：数学）"
        style="margin-bottom: 15px"
        clearable
    />

    <!-- 天数选择框 -->
    <el-select v-model="days" placeholder="选择学习天数" style="margin-bottom: 15px" clearable>
      <el-option v-for="i in 30" :key="i" :label="`${i}天`" :value="i" />
    </el-select>

    <!-- 功能按钮 -->
    <div class="button-container">
      <el-button type="primary" @click="generatePlan" :disabled="!subject || !days" size="medium">
        生成学习计划
      </el-button>
      <el-button type="info" @click="viewLearningPlan" :disabled="!subject" size="medium">
        查看学习计划
      </el-button>
      <el-button type="danger" @click="deleteLearningPlan" :disabled="!subject" size="medium">
        删除学习计划
      </el-button>
    </div>

    <!-- 显示学习计划 -->
    <div v-if="plan" class="plan-display">
      <h3>学习计划内容</h3>
      <pre>{{ plan }}</pre> <!-- 使用 <pre> 标签保留文本格式 -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-ui";

export default {
  data() {
    return {
      studentName: JSON.parse(localStorage.getItem("honey-user"))?.name || "", // 从 localStorage 获取学生姓名
      subject: "", // 当前选择的科目
      days: null, // 学习天数
      plan: "", // 存储学习计划内容
    };
  },
  methods: {
    // 生成学习计划
    async generatePlan() {
      if (!this.subject || !this.days) {
        ElMessage.error("请输入科目和选择学习天数");
        return;
      }

      try {
        const response = await axios.post("/api/generate-plan", {
          studentName: this.studentName,
          subject: this.subject,
          days: this.days,
        });

        if (response.data && response.data.plan) {
          this.plan = this.removeSpecialCharacters(response.data.plan); // 去除特殊字符
          ElMessage.success("学习计划生成成功");
        } else {
          ElMessage.error("生成学习计划失败");
        }
      } catch (error) {
        console.error("生成学习计划失败:", error);
        ElMessage.error(error?.response?.data || "生成学习计划失败");
      }
    },

    // 查看学习计划并直接显示
    async viewLearningPlan() {
      if (!this.subject) {
        ElMessage.error("请输入科目");
        return;
      }

      try {
        const response = await axios.get("http://localhost:9000/api/learning-plan", {
          params: {
            studentName: this.studentName,
            subject: this.subject,
          },
        });

        if (response.data && Array.isArray(response.data) && response.data.length > 0) {
          const planContent = response.data[0].planContent; // 获取数据库中的计划内容

          // 确保 planContent 是字符串类型
          if (typeof planContent === 'string') {
            this.plan = this.removeSpecialCharacters(planContent); // 去除特殊字符
            ElMessage.success("学习计划加载成功");
          } else {
            this.plan = ""; // 如果 planContent 格式不对，清空并提示
            ElMessage.error("学习计划格式不正确");
          }
        } else {
          this.plan = ""; // 没有学习计划时清空
          ElMessage.error("未找到学习计划");
        }
      } catch (error) {
        console.error("加载学习计划失败:", error);
        const errorMessage = error?.response?.data || "加载学习计划失败";
        ElMessage.error(errorMessage);
      }
    },

    // 删除学习计划
    async deleteLearningPlan() {
      if (!this.subject) {
        ElMessage.error("请输入科目");
        return;
      }

      try {
        const response = await axios.delete("http://localhost:9000/api/learning-plan/delete", {
          params: {
            studentName: this.studentName,
            subject: this.subject,
          },
        });

        if (response.data === "学习计划删除成功") {
          this.plan = ""; // 删除成功后清空当前计划
          ElMessage.success("学习计划删除成功");
        } else {
          ElMessage.error("删除学习计划失败");
        }
      } catch (error) {
        console.error("删除学习计划失败:", error);
        const errorMessage = error?.response?.data || "删除学习计划失败";
        ElMessage.error(errorMessage);
      }
    },

    // 去除计划中的特殊字符
    removeSpecialCharacters(planText) {
      if (!planText) return '';

      // 去除 ###、**、- 等特殊字符
      // 使用正则表达式匹配并去除 #、*、-，无论出现几次
      return planText
          .replace(/[#*\-]+/g, '') // 移除 #、*、-，可以是多个连续的
          .replace(/\n+/g, '\n') // 保持换行符
          .replace(/\n+/g, '\n'); // 保持换行符
    },
  },
};
</script>

<style scoped>
/* 页面背景和布局 */
.learning-plan-container {
  padding: 20px;
  background-color: #f7f8fa;
  max-width: 800px;
  margin: 0 auto;
}

/* 页面标题 */
.page-title {
  font-size: 26px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  margin-bottom: 30px;
}

/* 输入框和选择框的样式 */
.el-input, .el-select {
  width: 100%;
  margin-bottom: 15px;
}

/* 按钮容器 */
.button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* 按钮样式 */
.el-button {
  flex: 1;
  margin: 0 5px;
}

/* 显示学习计划的区域 */
.plan-display {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-display h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.plan-display pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}
</style>
